<div><span>id:</span>{{hero.id}}</div>
<div><span>name:</span>{{hero.name}}</div>

<div>
  <label>name:</label>
  <!-- [{ngModel}] 是angular的双向数据绑定语法 
  ngModel属于FormsModule，所以需要先导入该模块
  -->
  <input [(ngModel)]="hero.name" placeholder="name"/>
</div>


<h2>my heroes</h2>
<ul class="heroes">
  <!-- *ngFor是ng的一个复写指令
  heroes 来自组件的heroes属性
  (click)是ng的事件绑定语法，当click事件触发，就会执行组件的onSelect方法  
  -->
  <!-- <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero===selectedHero">
    <a routerLink="/detail/{{hero.id}}">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </a>
  </li> -->

  <li *ngFor="let hero of heroes">
    <a routerLink="/detail/{{hero.id}}">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </a>
  </li>

</ul>

<!-- 
{{}} 值绑定
() 事件绑定
[(ngModel)]双向绑定
[class.] class绑定
[] 属性绑定
 -->

 <!-- 主从组件
在本组件引入了hero-detail组件
[]是属性绑定，把本组件的selectedHero属性绑定到子组件的hero属性
-->
 <!-- <app-hero-detail [hero]="selectedHero"></app-hero-detail> -->